<template>
  <div class="index-form form-contain">
    <!-- <div class="common-banner" :style='{backgroundImage: `url(${this.banner})`}'> -->
     <div class="sevenheader">强付费能力诠释用户优质属性 手游成本屡创新低</div>
      <div class="sevencenter">
    <p>投放方案：</p>
    <div>采用在头部自制内容播放关联的方式，通过多点定向，精准触达年轻、具备高消费能力的目标受众</div>
   <p>效果转化：</p>
    <div>投放后，大幅降低了新增用户的获取成本，实现了用户量级的稳定增长，且爱奇艺平台转化用户的付费能力普遍很强</div>
    <p>客户评价：</p>
<div>爱奇艺用户与我们的用户匹配度高，因此我们尝试接入了这个渠道。 爱奇艺团队非常专业，协助我们锁定了爱奇艺2016年头部自制内容《余罪》，在视频播放关联页进行了精准、快速的广告推送；同时在播放页面做了一目了然的“下载”按钮，这种直接的吸引方式，给我们带来了惊喜使我们看到了细分平台对安装转化的大幅提升，现在每当有新产品上线，我们都会优先考虑在爱奇艺上进行投放。</div>
      </div>
      
      <div class="Results">
         <span>效果展示</span>
         <div :style ="note"><img src="static/images/360web.png" >
         <img src="static/images/webshow.png" >
         <img src="static/images/图层 1@3x (2).png" >
         
         </div>
         
      </div>
   
    </div>
</template>

<script>
import { getBanner } from '@/api/ajax'

export default {
  data () {
    return {
       note: {
            backgroundImage: "url(static/images/mobile-border.png)",
            backgroundRepeat: "no-repeat",
          },
    }
  },
  mounted () {
    getBanner({type: 3}).then(res => {
      this.banner = res.data.list[0].image
    })
  },
  created () {
  },
  methods: {
    addMore () {
    }
  }
}
</script>

<style lang="less">
 .sevenheader{
   width:19.47rem;
height:.87rem;
font-size:.87rem;
font-family:PingFang-SC-Regular;
font-weight:400;
color:rgba(51,51,51,1);
 margin: 0 auto;
  margin-top: 1rem;
  text-align: center;
  }

  .sevencenter{
    width:22.4rem;
height:20.8rem;
font-size:.8rem;
font-weight:400;
color:rgba(51,51,51,1);
margin: 0 auto;
margin-top: .9375rem;
position: relative;
}
.Results{
  width: 100%;
  height: auto;
  margin: 0 auto;
  div{
   background-size:7.53rem 14.73rem;
               width:7.53rem;
               height:14.73rem;
               display: block;
margin:0 auto;
margin-top: .9375rem;
     img:nth-child(1){
      display: block;
     width:6.8rem;
      height:12rem;
      padding-top:1.45rem;
          padding-left: 0.4rem;
    }
    img:nth-child(2){
      width: 12.4rem;
      height: 5.27rem;
          position: relative;
    left: -2.2rem;
    top: -11rem;
    }
    img:nth-child(3){
      width: 12.47rem;
      height: 6rem;
      margin: 0 auto;  
      position: relative;
    left: -2.2rem;
    top:-3.07rem; }
  }
}
.Results>span{
width:3.67rem;
height:.67rem;
font-size:.67rem;
font-family:PingFang-SC-Regular;
font-weight:400;
color:rgba(51,51,51,1);
display: block;
  margin: 0 auto;
  text-align: center;
}

</style>
